import {designPage, onMounted, useRefs} from "@peryl/react-compose";
import {i18n, Icon, Pagination, Plc, PlcIndex, Table} from "plain-design";
import './keyword-analysis.scss';
import {usePageService} from "../../../modules/micro/usePageService";
import {DataStatisticHead} from "../common/data-statistic-head";
import {useEchartsColor} from "../../../components/useEchartsColor";

export default designPage(() => {

  const keywordList = [
    { name: i18n.$intl('page.dataStatistic.keywords.1').d('iPadPro发售时间'), userCount: 291, percent: '66.63%' },
    { name: i18n.$intl('page.dataStatistic.keywords.2').d('母亲节祝福'), userCount: 755, percent: '47.41%' },
    { name: i18n.$intl('page.dataStatistic.keywords.3').d('比特币暴跌'), userCount: 482, percent: '40.51%' },
    { name: i18n.$intl('page.dataStatistic.keywords.4').d('俄罗斯阅兵'), userCount: 133, percent: '33.51%' },
    { name: i18n.$intl('page.dataStatistic.keywords.5').d('疫情失控对中国影响'), userCount: 429, percent: '89.40%' },
  ];

  const { microApp } = usePageService();

  const { color2, color6 } = useEchartsColor();

  const { refs, onRef } = useRefs({
    userCountEl: HTMLDivElement,
    userAverageEl: HTMLDivElement,
  });

  async function renderChart(el: HTMLDivElement) {
    const browserData = new Array(24).fill(0).map(i => Math.ceil(Math.random() * 7) + 3);
    const echarts = await microApp.resource.load('echarts', window);
    const ins = echarts.init(el);
    ins.setOption({
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
      },
      xAxis: [
        {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: new Array(24).fill(0).map(i => String(i))
        }
      ],
      yAxis: [
        {
          type: 'value',
          show: false,
          splitLine: { show: false },
        }
      ],
      series: [
        {
          name: 'Line 3',
          type: 'line',
          stack: '总量',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color2 },
              { offset: 1, color: color6 }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: browserData
        },
      ]
    });
  }

  onMounted(() => {
    renderChart(refs.userCountEl!);
    renderChart(refs.userAverageEl!);
  });

  return () => (
    <div className="keyword-analysis">
      <DataStatisticHead icon="pi-search" title={i18n.$intl('page.dataStatistic.hotKey').d("热门搜索")}>
        <Icon icon="pi-menu" status="primary"/>
      </DataStatisticHead>
      <div className="keyword-analysis-charts">
        <div className="keyword-analysis-charts-item">
          <div className="keyword-analysis-charts-item-title">
            <span>{i18n.$intl('page.dataStatistic.searchUserAmount').d("搜索用户数")}</span>
            <Icon icon="pi-user"/>
          </div>
          <div className="keyword-analysis-charts-item-data">
            <span>23,378</span>
            <span>16.8%</span>
            <Icon icon="pi-caret-up" status="success"/>
          </div>
          <div className="keyword-analysis-charts-item-el" ref={onRef.userCountEl}/>
        </div>
        <div className="keyword-analysis-charts-item">
          <div className="keyword-analysis-charts-item-title">
            <span>{i18n.$intl('page.dataStatistic.averageNumberOfSearches').d("平均搜索数")}</span>
            <Icon icon="pi-find-replace"/>
          </div>
          <div className="keyword-analysis-charts-item-data">
            <span>10.5</span>
            <span>6.1%</span>
            <Icon icon="pi-caret-down" status="warn"/>
          </div>
          <div className="keyword-analysis-charts-item-el" ref={onRef.userAverageEl}/>
        </div>
      </div>
      <div className="keyword-analysis-list">
        <Table data={keywordList} showRows={5} size={'mini'}>
          <PlcIndex/>
          <Plc title={i18n.$intl('page.dataStatistic.searchKeywords').d("搜索关键词")} field="name" fit/>
          <Plc title={i18n.$intl('page.dataStatistic.numberOfUsers').d("用户数")} field="userCount"/>
          <Plc title={i18n.$intl('page.dataStatistic.increaseInPrice').d("涨幅")} field="percent"/>
        </Table>
        <Pagination layout="sizes,prev,next,pager" size={'mini'} currentPage={1} pageSize={5} total={200} pageSizes={[5, 10, 20, 50, 100]}/>
      </div>
    </div>
  );
});
